<template>
	<div class="adm-head">
		<div class="container flex-between">
			<div class="logo">
				<img src="../assets/images/logo.png" alt=""><span>温县公安局基层执法办案智能化管理平台</span>
			</div>
			<div class="adm-right">
				<el-button type="text" @click="Visible = true">
					<i class="iconfont icon-pifu"></i>
				</el-button>
				<el-button type="text">
					<i class="iconfont icon-sd"></i>
				</el-button>
				<el-button type="text">
					<i class="iconfont icon-wenhao"></i>
				</el-button>
				<el-dropdown>
					<span class="el-dropdown-link">
						<img src="../assets/images/avatar.png" alt=""><span class="u-name">吴XX，您好</span><i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>我的资料</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<el-button type="text">
					<i class="iconfont icon-out"></i>
				</el-button>
			</div>
		</div>
		<!-- 皮肤 -->
		<el-dialog
			width="560px"
			custom-class="el-dialog-skin"
		:visible.sync="Visible" >
			<template slot="title">
				<span class="iconfont icon-pifu"></span><span class="tit">换肤设置</span>
			</template>
			<div class="skin-cells">
				<el-radio-group class="skin-group" v-model="radioV" @change="setData()">
					<el-radio :label="1">
						<img src="../assets/images/skin1.png" alt="">
					</el-radio>
					<el-radio :label="2">
						<img src="../assets/images/skin3.png" alt="">
					</el-radio>
					<el-radio :label="3">
						<img src="../assets/images/skin2.png" alt="">
					</el-radio>
				</el-radio-group>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		name: 'Head',
		data() {
			return {
				Visible:false,
				activeIndex: '1',
				navinput: '',
				radioV:1,
				skin:"skin3",
				bg:require('../assets/images/bg4.jpg'),
			};
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			setData() {
				if(this.radioV ==1){
					this.bg = require('../assets/images/bg.jpg')
					this.skin = "skin1"
				}else if(this.radioV == 2){
					this.skin = "skin2"
					this.bg = require('../assets/images/bg3.png')
				}else{
					this.skin = "skin3"
					this.bg = require('../assets/images/bg4.jpg')
				}
				this.$emit("getData", this.bg,this.skin);
				this.Visible = false
			}
		}
	}
</script>
